<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <input type="text" placeholder="姓名" v-model="emp.name">
    <input type="text" placeholder="工资" v-model="emp.salary">
    <input type="text" placeholder="工作" v-model="emp.job">
    <input type="button" value="添加员工" @click="add()">
    <el-table :data="arr">
        <!--el-table type="index"属性是指该行的索引-->
        <el-table-column type="index" label="编号"  width="200"></el-table-column>
        <el-table-column prop="name" label="姓名" width="200"></el-table-column>
        <el-table-column prop="salary" label="工资" width="200"></el-table-column>
        <el-table-column prop="job" label="工作" width="200"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index,scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let v=new Vue({
        el: '#app',
        data: function() {
            return {
                emp:{name:"",salary:"",job:""},
                arr:[{name:"悟空",salary:"8000",job:"程序员"},{name:"八戒",salary:2000,job:"销售"}]
            }
        },
        methods:{
            add(){
                /*将从input 获取的值付给e对象*/
                let e={name:v.emp.name,salary:v.emp.salary,job:v.emp.job};
                /*这里将e加入数组arr中去*/
                v.arr.push(e);
            },
            handleDelete(index, row) {
                /*splice 从数组中删除索引开始的函数,删除行数1行*/
                v.arr.splice(index,1);
                v.$message("删除了"+row.name);
            }
        }
    })
</script>
</body>
</html>